<template>
    <div>
        <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="OUTBOUND"
                sub-title="出库单申请"
        />
        <a-form style="margin: 30px 200px" layout="vertical" :model="outBoundBill">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            label="销售单"
                            name="title">
                        <a-select
                                ref="select"
                                v-model:value="outBoundBill.salesBillId"
                                placeholder="请选择销售单"
                                @change="salesBillSelected"
                                :options="salesBillList"
                                :field-names="{label:'title',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            v-bind="validateInfos.title"
                            label="标题"
                            name="title">
                        <a-input :disabled="disabledFlag" v-model:value="outBoundBill.title"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item
                            v-bind="validateInfos.goodsId"
                            label="出库商品"
                            name="goodsId">
                        <a-select
                                ref="select"
                                v-model:value="outBoundBill.goodsId"
                                placeholder="请选择"
                                :disabled="true"
                                @change="handlerSelected"
                        >
                            <a-select-option v-for="(item,index) in goodsList"
                                             :disabled="item.quantity < 1"
                                             :key="index"
                                             :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item
                            v-bind="validateInfos.quantity"
                            label="出库数量"
                            name="quantity">
                        <a-input-number v-model:value="outBoundBill.quantity"
                                        :disabled="true"
                                        :min="1"
                                        :max="maxNum"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            v-bind="validateInfos.remark"
                            label="出库详情"
                            name="remark">
                        <a-textarea :disabled="disabledFlag" :auto-size="{minRows:3}" v-model:value="outBoundBill.remark"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.buyer"
                            label="请选择审批的采购员"
                            name="buyer">
                        <a-select
                                ref="select"
                                v-model:value="outBoundBill.buyer"
                                placeholder="请选择"
                                :disabled="disabledFlag"
                                style="width: 120px"
                                :options="buyerList"
                                :field-names="{label:'username',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.salesman"
                            label="请选择审批的销售员"
                            name="salesman">
                        <a-select
                                ref="select"
                                v-model:value="outBoundBill.salesman"
                                placeholder="请选择"
                                :disabled="disabledFlag"
                                style="width: 120px"
                                :options="salesmanList"
                                :field-names="{label:'username',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.manger"
                            label="请选择审批的经理"
                            name="manger">
                        <a-select
                                ref="select"
                                v-model:value="outBoundBill.manger"
                                placeholder="请选择"
                                :disabled="disabledFlag"
                                style="width: 120px"
                                :options="mangerList"
                                :field-names="{label:'username',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item>
                        <a-space>
                            <a-button type="primary" @click="submitOk">
                                提交申请
                            </a-button>
                            <a-button type="default" @click="resetFields">
                                重置
                            </a-button>
                        </a-space>

                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message, Form} from 'ant-design-vue'
    import {SessionStorage} from '../../../public/session-storage.js'
    import {useRouter} from 'vue-router'

    export default {
        name: "inventory-outBoundApply",
        setup() {
            const outBoundBill = ref({
                title: '',
                goodsId: '',
                quantity: '',
                remark: '',
                buyer: undefined,
                salesman: undefined,
                manger: undefined,
            })
            const maxNum = ref(1)
            const disabledFlag = ref(true);
            const userList = ref([])
            const goodsList = ref([])
            const buyerList = ref([])
            const salesmanList = ref([])
            const mangerList = ref([])
            const salesBillList = ref([])
            const loginUser = ref({})
            const router = useRouter()
            const useForm = Form.useForm
            const {validate, validateInfos, resetFields} = useForm(outBoundBill, {
                title: [{required: true, message: '标题不能为空', trigger: ['submit', 'change']}],
                goodsId: [{required: true, message: '请选择商品', trigger: ['submit', 'change']}],
                quantity: [{required: true, message: '请输入商品数量', trigger: ['submit', 'change']}],
                remark: [{required: true, message: '出库详情不能为空', trigger: ['submit', 'change']}],
                buyer: [{required: true, message: '请选择审批的采购员', trigger: ['submit', 'change']}],
                salesman: [{required: true, message: '请选择审批的销售员', trigger: ['submit', 'change']}],
                manger: [{required: true, message: '请选择审批的经理', trigger: ['submit', 'change']}],
            })

            const submitOk = () => {
                validate().then(() => {
                    outBoundBill.value.userId = loginUser.value.id
                    outBoundBill.value.state = 0

                    axios.post('outBoundProcess/startOutBound', outBoundBill.value).then(rs => {
                        console.log("申请结果", rs)
                        if (rs.data.code == 200) {
                            message.success("出库申请提交成功")
                            router.push('/inventory/outBoundLog')
                        } else {
                            message.error(rs.data.message)
                        }
                    })
                }).catch(() => {
                    console.log("校验失败")
                })
            }

            const handlerSelected = (value) => {
                goodsList.value.forEach(val => {
                    if (val.id == value) {
                        maxNum.value = val.quantity
                        return
                    }
                })
            }

            const salesBillSelected = (value)=>{
                axios.get('salesBill/queryById/' + value).then(rs=>{
                    let goodsId = rs.data.data.goodsId
                    let quantity = rs.data.data.quantity
                    axios.get('goods/queryById/' + goodsId).then(rs=>{
                        if (rs.data.data.quantity < quantity){
                            message.warning("当前商品库存不能满足该销售单请求，请选择其他销售单")
                            resetFields()
                        }else {
                            disabledFlag.value = false
                            outBoundBill.value.quantity = quantity
                            outBoundBill.value.goodsId = goodsId
                            handlerSelected(outBoundBill.value.goodsId)
                        }
                    })
                })
            }

            onMounted(() => {
                loginUser.value = SessionStorage.get('loginUser')
                axios.get('/user/queryAll').then(rs => {
                    userList.value = rs.data.data
                    userList.value.forEach(val => {
                        if (val.roleId == 3) {
                            salesmanList.value.push(val)
                        }
                        if (val.roleId == 2) {
                            buyerList.value.push(val)
                        }
                        if (val.roleId == 1) {
                            mangerList.value.push(val)
                        }
                    })
                })
                axios.get('/goods/queryAll').then(rs => {
                    goodsList.value = rs.data.data
                    goodsList.value.sort((e1, e2) => e2.quantity - e1.quantity)
                })
                axios.get('salesBill/queryNotProcessed').then(rs=>{
                    salesBillList.value = rs.data.data
                })
            })
            return {
                outBoundBill,
                submitOk,
                validateInfos,
                resetFields,
                salesmanList,
                buyerList,
                mangerList,
                goodsList,
                handlerSelected,
                maxNum,
                salesBillList,
                salesBillSelected,
                disabledFlag
            }
        }
    }
</script>

<style scoped>

</style>